<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nouse {
    color: red;
}

.use {
    color: green;
}
</style>
</head>
<body>
<div id="div">
    <input type="text" autofocus><i></i><br>
    <input type="text">
</div>
<script>
// onfocus
var input1 = document.querySelector("input");
/*input1.focus();*/
input1.onfocus = function (){
    console.log("我获取到了焦点");
}
input1.onblur = function (){
    var val = this.value;
    if (val.length >= 4){
        this.nextElementSibling.innerHTML = "用户名可用";
        this.nextElementSibling.className = "use"
    }else{
        this.nextElementSibling.innerHTML = "用户名不可用";
        this.nextElementSibling.className = "nouse";
        this.focus();  // 让这个元素继续获取焦点
    }
}
div.onfocus = function (){
    console.log("div.....");
}
</script>
</body>
</html>
<!--
    作者：李振超  2017年8月2日16:25
    onfocus 和 onblur 是不冒泡的
    onfocusin 和 onfocusout 是冒泡的版本
-->